<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>前端开发</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="js/Vue.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/Vue.js"></script>
    <script src="js/axios.js"></script>
    <style>
        .font {
            font-family: 黑体;
            font-weight: normal;
        }
    </style>
</head>

<body>
<div id="app">
    <div>
        <header>
            <h1 align="center">{{name}}</h1>
        </header>
    </div>
    <p>
        <label>一、选择题（每题{{singleScore}}分，共{{paperStructures.singleChoiceScore}}分）</label><br>
    <ol>
        <li v-for="(singleChoices,index) in singleChoicess">
            <label class="font">{{singleChoices.content}}</label><br>
            <div v-for="(question,index) in questionss">
                <input type="hidden" v-if="singleChoices.id==question.singleChoiceId" :data-index="singleChoices.id"
                       :value="question.questionNum"
                       id="singleChoiceNum[singleChoices.id]">
                <input type="hidden" v-if="singleChoices.id==question.singleChoiceId" :data-indexs="singleChoices.id"
                       :value="question.paperId"
                       id="singleChoiceNums[index]">
            </div>
            <input type="radio" :data-single="singleChoices.id" :name="index" value="A">（A）{{singleChoices.optiona}}<br>
            <input type="radio" :data-single="singleChoices.id" :name="index" value="B">（B）{{singleChoices.optionb}}<br>
            <input type="radio" :data-single="singleChoices.id" :name="index" value="C">（C）{{singleChoices.optionc}}<br>
            <input type="radio" :data-single="singleChoices.id" :name="index" value="D">（D）{{singleChoices.optiond}}<br>
            <label>答案:{{singleChoices.answer}}&nbsp;&nbsp;&nbsp;&nbsp;详情:{{singleChoices.answerDetail}}</label>
        </li>
        <!-- <li>
             Java语言支持：<br>
             <input type="radio" name="key2.2" value="A">（A）单继承<br>
             <input type="radio" name="key2.2" value="B">（B）多继承<br>
             <input type="radio" name="key2.2" value="C">（C）单继承和多继承都支持<br>
             <input type="radio" name="key2.2" value="D">（D）单继承和多继承都不支持<br>
         </li>-->
    </ol>
    </p>
    <p>
        <label>二、多选题（每题{{multipleChoiceScores}}分，共{{paperStructures.multipleChoiceScore}}分）</label><br>
    <ol>
        <li v-for="(multipleChoices,index) in multipleChoicess">
            <label class="font">{{multipleChoices.content}}</label><br>
            <div v-for="(question,index) in questionss">
                <input type="hidden" v-if="multipleChoices.id==question.multipleChoiceId"
                       :data-multiple="multipleChoices.id"
                       :value="question.questionNum">
                <input type="hidden" v-if="multipleChoices.id==question.multipleChoiceId"
                       :data-multiples="multipleChoices.id"
                       :value="question.paperId">
            </div>
            <input type="checkbox" :data-multipless="multipleChoices.id" :name="index" value="A">（A）{{multipleChoices.optiona}}<br>
            <input type="checkbox" :data-multipless="multipleChoices.id" :name="index" value="B">（B）{{multipleChoices.optionb}}<br>
            <input type="checkbox" :data-multipless="multipleChoices.id" :name="index" value="C">（C）{{multipleChoices.optionc}}<br>
            <input type="checkbox" :data-multipless="multipleChoices.id" :name="index" value="D">（D）{{multipleChoices.optiond}}<br>
            <label>答案:{{multipleChoices.answer}}&nbsp;&nbsp;&nbsp;&nbsp;详情:{{multipleChoices.answerDetail}}</label>
        </li>
        <!-- <li>
             Java语言支持：<br>
             <input type="checkbox" name="key2.2" value="A">（A）单继承<br>
             <input type="checkbox" name="key2.2" value="B">（B）多继承<br>
             <input type="checkbox" name="key2.2" value="C">（C）单继承和多继承都支持<br>
             <input type="checkbox" name="key2.2" value="D">（D）单继承和多继承都不支持<br>
         </li>-->
    </ol>
    </p>
    <p>
        <label>三、判断题（每题{{trueOrFalseScores}}分，共{{paperStructures.trueOrFalseScore}}分）</label><br>
    <ol>
        <li v-for="(trueOrFalses,index) in trueOrFalsess">
            <label class="font">{{trueOrFalses.content}}</label>
            <span v-for="(question,index) in questionss">
                <input type="hidden" v-if="trueOrFalses.id==question.trueOrFalseId" :data-trueOrFalses="trueOrFalses.id"
                       :value="question.questionNum">
                <input type="hidden" v-if="trueOrFalses.id==question.trueOrFalseId"
                       :data-trueOrFalsess="trueOrFalses.id"
                       :value="question.paperId">
            </span>
            <input type="radio" :data-trueOrFalse="trueOrFalses.id" value="1" style="margin-left: 10px">对
            <input type="radio" :data-trueOrFalse="trueOrFalses.id" value="0" style="margin-left: 5px">错
            <label v-if="trueOrFalses.answer==0">答案:对&nbsp;&nbsp;&nbsp;&nbsp;详情:{{trueOrFalses.answerDetail}}</label>
            <label v-if="trueOrFalses.answer==1">答案:错&nbsp;&nbsp;&nbsp;&nbsp;详情:{{trueOrFalses.answerDetail}}</label>
            <br>
        </li>
        <!-- <li>
             在状态图中，终止状态在一个状态图中允许有任意多个。
             <input type="radio" name="key4.2" value="true">对
             <input type="radio" name="key4.2" value="false">错
             <br>
         </li>-->
    </ol>
    </p>
    <p>
        <label>四、填空题（每空{{completionScores}}分，共{{paperStructures.completionScore}}分）</label><br>
    <ol id="inputbox">
        <li v-for="(blankFillings,index) in blankFillingss">
            <label class="font">{{blankFillings.content}}</label>
            <span v-for="question in questionss">
                <input type="hidden" v-if="blankFillings.id==question.blankFillingId" :data-blank="blankFillings.id"
                       :value="question.questionNum">
                <input type="hidden" v-if="blankFillings.id==question.blankFillingId" :data-blanks="blankFillings.id"
                       :value="question.paperId">
            </span>
            <input type="text" :data-blankFillings="blankFillings.id"
                   style="border: none;border-bottom: 1px solid;outline: none; width: 150px;" name="key1.1"
                   value=""><br>
            <label>答案:{{blankFillings.answer}}&nbsp;&nbsp;&nbsp;&nbsp;详情:{{blankFillings.answerDetail}}</label>
        </li>
        <!--<li>
            对象最突出的特征是
            <input type="text" style="border: none;border-bottom: 1px solid;outline: none;width: 150px;" name="key1.2.1"
                   value="">
            <input type="text" style="border: none;border-bottom: 1px solid;outline: none;width: 150px;" name="key1.2.2"
                   value="">
            <input type="text" style="border: none;border-bottom: 1px solid;outline: none;width: 150px;" name="key1.2.3"
                   value="">
            <br>
        </li>-->
    </ol>
    </p>
    <p>
        <label>五、简答题（每空{{answerScores}}分，共{{paperStructures.answerScore}}分）</label><br>
    <ol>
        <li v-for="(shortAnswers,index) in shortAnswerss">
            <label class="font">{{shortAnswers.content}}</label><br>
            <div v-for="question in questionss">
                <input type="hidden" v-if="shortAnswers.id==question.shortAnswerId" :data-short="shortAnswers.id"
                       :value="question.questionNum">
                <input type="hidden" v-if="shortAnswers.id==question.shortAnswerId" :data-shorts="shortAnswers.id"
                       :value="question.paperId">
            </div>
            <textarea name="key5.1" style="outline: none;" value="" :data-shortAnswers="shortAnswers.id" rows="5"
                      cols="30"></textarea>
            <br>
            <label>答案:{{shortAnswers.answer}}&nbsp;&nbsp;&nbsp;&nbsp;详情:{{shortAnswers.answerDetail}}</label>
        </li>
    </ol>
    </p>
    <button type="button" class="btn btn-success" @click="returnHtml()" style="margin-left: 50%;">返回首页</button>
    <br>
    <hr>
</div>
<script>
    new Vue({
        el: "#app",
        data: {
            p: 4,
            singleChoicess: [],
            multipleChoicess: [],
            blankFillingss: [],
            shortAnswerss: [],
            trueOrFalsess: [],
            paperStructures: [],
            singleScore: "",
            answerScores: "",
            completionScores: "",
            multipleChoiceScores: "",
            questionTotalScores: "",
            trueOrFalseScores: "",
            questionss: [],
            answerQuestion: [],
            time: "",
            name: "",
            question: [],
            answer: []
        },
        mounted() {	//当页面元素加载之前执行
            axios.get("/fullPaper/" + this.p)
                .then(res => {
                    console.info(res.data.data);
                    this.question = res.data.data;
                    this.time = res.data.data.time;
                    this.name = res.data.data.name;
                    this.singleChoicess = res.data.data.singleChoices;
                    this.multipleChoicess = res.data.data.multipleChoices;
                    this.blankFillingss = res.data.data.blankFillings;
                    this.trueOrFalsess = res.data.data.trueOrFalses;
                    this.shortAnswerss = res.data.data.shortAnswers;
                    this.paperStructures = res.data.data.paperStructure;
                    this.singleScore = this.paperStructures.singleChoiceScore / this.paperStructures.singleChoiceNum;
                    this.answerScores = this.paperStructures.answerScore / this.paperStructures.answerNum;
                    this.completionScores = this.paperStructures.completionScore / this.paperStructures.completionNum;
                    this.multipleChoiceScores = this.paperStructures.multipleChoiceScore / this.paperStructures.multipleChoiceNum;
                    this.questionTotalScores = this.paperStructures.questionTotalScore / this.paperStructures.questionTotalNum;
                    this.trueOrFalseScores = this.paperStructures.trueOrFalseScore / this.paperStructures.trueOrFalseNum;
                    this.questionss = res.data.data.questions;
                    // console.log(this.singleScore);
                    // console.log(this.singleChoicess);
                    // console.log(this.name);
                    // console.info(this.time);
                    axios.get("/getAnswer/" + this.p)
                        .then(res => {
                            this.answer = res.data.data;
                            let ques = this.questionss;
                            for (let i = 0; i < ques.length; i++) {
                                if (ques[i].singleChoiceId != 0) {
                                    let single = $("input[data-index=" + ques[i].singleChoiceId + "]")[0];
                                    let singles = $("input[data-single=" + ques[i].singleChoiceId + "]");
                                    for (let j = 0; j < singles.length; j++) {
                                        singles[j].disabled = true;
                                        if (singles[j].value == this.answer[i].answer) {
                                            singles[j].checked = true;
                                        }
                                    }
                                }
                                if (ques[i].multipleChoiceId != 0) {
                                    let multiple = $("input[data-multiple=" + ques[i].multipleChoiceId + "]")[0];
                                    let multiples = $("input[data-multipless=" + ques[i].multipleChoiceId + "]");
                                    for (let j = 0; j < multiples.length; j++) {
                                        console.info(multiples.length + "+" + ques[i].multipleChoiceId);
                                        multiples[j].disabled = true;
                                        if (this.answer[i].answer.match(multiples[j].value)) {
                                            multiples[j].checked = true;
                                        }
                                    }
                                }
                                if (ques[i].trueOrFalseId != 0) {
                                    let trueOrFalses = $("input[data-trueOrFalse=" + ques[i].trueOrFalseId + "]");
                                    for (let j = 0; j < trueOrFalses.length; j++) {
                                        console.info(trueOrFalses.length + "+" + ques[i].trueOrFalseId);
                                        trueOrFalses[j].disabled = true;
                                        if (this.answer[i].answer == trueOrFalses[j].value) {
                                            trueOrFalses[j].checked = true;
                                        }
                                    }
                                }
                                if (ques[i].blankFillingId != 0) {
                                    let blankFillings = $("input[data-blankFillings=" + ques[i].blankFillingId + "]");
                                    console.info(blankFillings);
                                    for (let j = 0; j < blankFillings.length; j++) {
                                        console.info(blankFillings.length + "+" + ques[i].blankFillingId);
                                        blankFillings[j].disabled = true;
                                        blankFillings[j].value = this.answer[i].answer;
                                    }
                                }
                                if (ques[i].shortAnswerId != 0) {
                                    let shortAnswer = $("textarea[data-shortAnswers=" + ques[i].shortAnswerId + "]");
                                    console.info(shortAnswer);
                                    for (let j = 0; j < shortAnswer.length; j++) {
                                        console.info(shortAnswer.length + "+" + ques[i].shortAnswerId);
                                        shortAnswer[j].disabled = true;
                                        shortAnswer[j].value = this.answer[i].answer;
                                    }
                                }
                            }
                            /*let single = $("input[data-index=" + singleId + "]")[0];
                            let multiple = $("input[data-multiple=" + multipleId + "]")[0];
                            let short = $("input[data-short=" + shortId + "]")[0];
                            let trueOrFalse = $("input[data-trueOrFalses=" + trueOrFalseId + "]")[0];
                            let blank = $("input[data-blank=" + blankId + "]")[0];
                            console.info(single, multiple, short, trueOrFalse, blank);*/
                        });
                });

        }, methods: {
            returnHtml: function () {
                window.location.href = "index.html";
            }
        }
    })
</script>
</body>
</html>
